import { Button, FormControl, Grid, InputLabel, MenuItem, Select ,makeStyles, Switch } from '@material-ui/core';
import React, { useState } from 'react'
import {useDispatch} from 'react-redux';
import { useHistory } from 'react-router-dom';
import { CommonTextField } from '../../components';
import {setCategory,setAsncContent} from '../../redux/newsDetail/action';

const GridProps = {
  xs: 12,
  item: true,
  container: true
};

const ItemProps = {
  item: true,
  xs: 12,
  sm:6,
  md:6,
  lg:6
};

const textStyle = {
  padding: '6px'
}

const itemStyle = {
  padding: '6px',
  marginBottom: '10px'
}
const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    width: '100%',
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
  back: {
    marginLeft:'10px'
  }
}));

export default function Detail() {
  const classes = useStyles();
  const dispath =  useDispatch();
  const history = useHistory();
  const newCategory = setCategory({
    name: "标题",
    pid: 2
  })
  //category状态和select数据
  const [categoryValue,setCategoryValue] = useState();
  const categorys = [
    {
      cid: 1,
      value: 'news'
    },
    {
      cid: 2,
      value: 'About Us'
    },
    {
      cid: 3,
      value: 'Contact'
    },
  ];
  const handleChange = (event) => {
    setCategoryValue(event.target.value);
  }
  return (
    <div>
      <Grid container>
        <Grid style={textStyle} {...GridProps}>
          <Grid style={itemStyle} {...ItemProps}>
            <CommonTextField label="Title" />
          </Grid>
          <Grid style={itemStyle} {...ItemProps}>
            <CommonTextField label="Sub Title" />
          </Grid>
          <Grid style={itemStyle} {...ItemProps}>
            <CommonTextField label="Count" />
          </Grid>
          <Grid style={itemStyle} {...ItemProps}>
            <FormControl className={classes.formControl}>
              <InputLabel id="category" >Category</InputLabel>
              <Select 
                fullWidth
                labelId='category'
                id='category-select'
                value={categoryValue}
                onChange={handleChange}
                >
                  {categorys.map((item,key)=><MenuItem key={key} value={item.cid}>{item.value}</MenuItem>)}
              </Select>
            </FormControl>
          </Grid>
          <Grid style={itemStyle} {...ItemProps}>
            <Switch 
              name='Status'
            />
          </Grid>
        </Grid>
        <Grid style={{textAlign:'center'}} xs={12} item>
          <Button variant="contained" color="primary" onClick={() => {
            dispath(setAsncContent()) 
          }}>保存</Button>
          <Button className={classes.back} variant="contained" onClick={()=>{
            history.goBack();
          }} >返回</Button>
        </Grid>
      </Grid>
    </div>
  )
}
